<template>
  <view class="order-detail-container">
    <!-- 顶部导航栏 -->
    <view class="top-nav">
      <image 
        class="back-icon" 
        src="/static/image/arrow_right.png" 
        mode="aspectFit" 
        @click="navigateBack"
      />
      <text class="nav-title">订单详情</text>
      <view class="empty-box"></view>
    </view>

    <!-- 订单状态 -->
    <view class="status-section">
      <view class="status-icon">
        <uni-icons 
          :type="getOrderStatusIcon(orderDetail.status)" 
          :color="getOrderStatusColor(orderDetail.status)" 
          size="40"
        />
      </view>
      <text class="status-text">{{ orderDetail.status }}</text>
      <text class="status-desc">{{ getOrderStatusDesc(orderDetail.status) }}</text>
    </view>

    <!-- 订单信息 -->
    <view class="detail-section">
      <view class="detail-card">
        <view class="card-header">
          <text class="card-title">订单信息</text>
        </view>
        <view class="card-content">
          <view class="info-row">
            <text class="label">订单编号：</text>
            <text class="value">{{ orderDetail.number }}</text>
          </view>
          <view class="info-row">
            <text class="label">下单时间：</text>
            <text class="value">{{ orderDetail.createTime }}</text>
          </view>
          <view class="info-row">
            <text class="label">订单状态：</text>
            <text class="value" :class="getOrderStatusClass(orderDetail.status)">
              {{ orderDetail.status }}
            </text>
          </view>
        </view>
      </view>

      <view class="detail-card">
        <view class="card-header">
          <text class="card-title">场馆信息</text>
        </view>
        <view class="card-content">
          <view class="info-row">
            <text class="label">场馆名称：</text>
            <text class="value">{{ orderDetail.courtName }}</text>
          </view>
          <view class="info-row">
            <text class="label">球桌类型：</text>
            <text class="value">{{ orderDetail.courtType }}</text>
          </view>
          <view class="info-row">
            <text class="label">预订日期：</text>
            <text class="value">{{ orderDetail.date }}</text>
          </view>
          <view class="info-row">
            <text class="label">使用时间：</text>
            <text class="value">{{ orderDetail.time }}</text>
          </view>
          <view class="info-row">
            <text class="label">使用人数：</text>
            <text class="value">{{ orderDetail.people }}人</text>
          </view>
        </view>
      </view>

      <view class="detail-card">
        <view class="card-header">
          <text class="card-title">费用信息</text>
        </view>
        <view class="card-content">
          <view class="info-row">
            <text class="label">场地费用：</text>
            <text class="value">¥{{ orderDetail.price }}</text>
          </view>
          <view class="info-row total-row">
            <text class="label">实付金额：</text>
            <text class="value total-price">¥{{ orderDetail.price }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-section" v-if="orderDetail.status === '待核销'">
      <button class="action-btn cancel-btn" @click="applyRefund">取消订单</button>
      <button class="action-btn verify-btn" @click="confirmVerification">立即核销</button>
    </view>
  </view>
</template>aa

<script setup>
import { ref } from 'vue'

// 订单详情数据
const orderDetail = ref({
  id: 1,
  number: 'TT20231201001',
  status: '待核销',
  createTime: '2023-12-01 15:30',
  courtName: '市体育馆乒乓球馆',
  courtType: '红双喜专业台桌',
  date: '2023-12-15',
  time: '14:00-16:00',
  people: 2,
  price: 80
})

// 模拟订单详情数据
const mockOrderDetails = [
  {
    id: 1,
    number: 'TT20231201001',
    status: '待核销',
    createTime: '2023-12-01 15:30',
    courtName: '市体育馆乒乓球馆',
    courtType: '红双喜专业台桌',
    date: '2023-12-15',
    time: '14:00-16:00',
    people: 2,
    price: 80
  },
  {
    id: 2,
    number: 'TT20231202005',
    status: '待核销',
    createTime: '2023-12-02 18:45',
    courtName: '高校乒乓俱乐部',
    courtType: '双鱼训练台桌',
    date: '2023-12-18',
    time: '19:00-21:00',
    people: 4,
    price: 120
  },
  {
    id: 3,
    number: 'TT20231128012',
    status: '已核销',
    createTime: '2023-11-28 11:20',
    courtName: '社区活动中心',
    courtType: '标准竞赛台桌',
    date: '2023-12-01',
    time: '10:00-12:00',
    people: 2,
    price: 60
  },
  {
    id: 4,
    number: 'TT20231125008',
    status: '已核销',
    createTime: '2023-11-25 16:15',
    courtName: '专业训练基地',
    courtType: 'TIBHAR专业台桌',
    date: '2023-11-28',
    time: '15:00-17:00',
    people: 3,
    price: 90
  },
  {
    id: 5,
    number: 'TT20231120015',
    status: '已退款',
    createTime: '2023-11-20 09:40',
    courtName: '大学体育中心',
    courtType: '双鱼教学台桌',
    date: '2023-11-25',
    time: '18:00-20:00',
    people: 2,
    price: 70
  },
  {
    id: 6,
    number: 'TT20231115022',
    status: '已退款',
    createTime: '2023-11-15 14:25',
    courtName: '职工活动中心',
    courtType: '红双喜训练台桌',
    date: '2023-11-20',
    time: '13:00-15:00',
    people: 4,
    price: 80
  }
]

// 获取订单状态图标
const getOrderStatusIcon = (status) => {
  switch (status) {
    case '待核销': return 'checkbox'
    case '已核销': return 'checkmarkempty'
    case '已退款': return 'closeempty'
    default: return 'help'
  }
}

// 获取订单状态颜色
const getOrderStatusColor = (status) => {
  switch (status) {
    case '待核销': return '#faad14'
    case '已核销': return '#07c160'
    case '已退款': return '#999'
    default: return '#666'
  }
}

// 获取订单状态描述
const getOrderStatusDesc = (status) => {
  switch (status) {
    case '待核销': return '请在使用前完成核销'
    case '已核销': return '订单已完成'
    case '已退款': return '订单已退款'
    default: return '未知状态'
  }
}

// 获取订单状态样式类
const getOrderStatusClass = (status) => {
  switch (status) {
    case '待核销': return 'status-pending'
    case '已核销': return 'status-verified'
    case '已退款': return 'status-refunded'
    default: return ''
  }
}

// 页面加载时获取详情
const onLoad = (options) => {
  const orderId = Number(options.id)
  const detail = mockOrderDetails.find(item => item.id === orderId)
  
  if (detail) {
    orderDetail.value = detail
  } else {
    uni.showToast({
      title: '未找到订单详情',
      icon: 'none'
    })
  }
}

// 返回上一页
const navigateBack = () => {
  uni.navigateBack()
}

// 申请退款
const applyRefund = () => {
  uni.showToast({
    title: '申请退款功能开发中',
    icon: 'none'
  })
}

// 确认核销
const confirmVerification = () => {
  uni.showToast({
    title: '确认核销功能开发中',
    icon: 'none'
  })
}

// 暴露onLoad方法给uni-app
defineExpose({
  onLoad
})
</script>

<style lang="scss">
$primary-color: #165dff;
$success-color: #07c160;
$warning-color: #faad14;
$gray-light: #f5f5f5;
$gray-middle: #999;
$gray-dark: #666;
$border-color: #f0f0f0;
$danger-color: #f5222d;

.order-detail-container {
  min-height: 100vh;
  background-color: $gray-light;
  padding-bottom: 20px;
}

.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 16px;
  background-color: #fff;
  border-bottom: 1px solid $border-color;

  .back-icon {
    width: 24px;
    height: 24px;
    transform: rotate(180deg);
    cursor: pointer;
  }

  .nav-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
  }

  .empty-box {
    width: 24px;
  }
}

.status-section {
  background-color: #fff;
  padding: 30px 16px;
  text-align: center;
  margin-bottom: 12px;

  .status-icon {
    margin-bottom: 15px;
  }

  .status-text {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    display: block;
  }

  .status-desc {
    font-size: 14px;
    color: $gray-middle;
  }
}

.detail-section {
  padding: 0 12px;

  .detail-card {
    background-color: #fff;
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;

    .card-header {
      padding: 16px;
      border-bottom: 1px solid $border-color;

      .card-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
      }
    }

    .card-content {
      padding: 16px;

      .info-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;

        &:last-child {
          margin-bottom: 0;
        }

        .label {
          font-size: 14px;
          color: $gray-dark;
        }

        .value {
          font-size: 14px;
          color: #333;
          text-align: right;
          max-width: 60%;

          &.status-pending {
            color: $warning-color;
          }

          &.status-verified {
            color: $success-color;
          }

          &.status-refunded {
            color: $gray-middle;
          }
        }

        &.total-row {
          margin-top: 10px;
          padding-top: 10px;
          border-top: 1px dashed $border-color;

          .value.total-price {
            font-size: 16px;
            font-weight: 600;
            color: $danger-color;
          }
        }
      }
    }
  }
}

.action-section {
  display: flex;
  padding: 20px 16px;
  background-color: #fff;
  margin-top: 12px;

  .action-btn {
    flex: 1;
    height: 44px;
    border-radius: 6px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0e0e0;

    &.cancel-btn {
      background-color: #fff;
      color: #333;
      margin-right: 12px;
    }

    &.verify-btn {
      background-color: $primary-color;
      color: #fff;
    }
  }
}
</style>